<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>格网聚合分析作业</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
    <style>
        .ol-popup {
            position: absolute;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="model" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <p>正在创建格网聚合分析作业...</p>
            </div>
        </div>
    </div>
</div>
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup" style='width:20%'>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">格网聚合分析作业</h3>
        </div>
        <div class="panel-body">
            <div class="input-group">
                <span class="input-group-addon">输入数据　</span>
                <input id="datasetName" type="text" class="form-control"
                       placeholder="samples_newyork_taxi_2013-01_14k"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">聚合类型　</span>
                <select class="form-control" id="type" name="clientType">
                    <option value="SUMMARYMESH" selected="selected">网格面聚合</option>
                </select>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">网格面类型</span>
                <select class="form-control" id="meshType" name="clientType">
                    <option value="0" selected="selected">四边形网格</option>
                    <option value="1">六边形网格</option>
                </select>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">权重值索引</span>
                <input id="fields" type="text" class="form-control" placeholder="7"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">分析范围　</span>
                <input id="query" type="text" class="form-control" placeholder="-74.150, 40.550, -73.750, 40.950"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">分辨率　　</span>
                <input id="resolution" type="text" class="form-control" placeholder="0.001"/>
            </div>
            <p>
            <div class="input-group">
                <span class="input-group-addon">统计模式　</span>
                <input id="statisticModes" type="text" class="form-control" placeholder="max"/>
            </div>
            <p>
            <div align="right">
                <input type="button" id='btn' class="btn btn-primary" value="创建"/>
            </div>
        </div>
    </div>
</div>

<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../dist/iclient9-openlayers.min.js"></script>
<script type="text/javascript">
    var layer, processingJobsUrl = "http://117.122.248.69:8090/iserver/services/spatialprocessing/rest/v1/jobs",
            token = 'oZdJwpVhYnPNEAt8-ykB-Cy39gEZkdvPZ9knTbCdui1SoBeXWVCwx-j5tOVSScotsUX1qwZF44X9m6wNME1kBg..',
            map = new ol.Map({
                target: 'map',
                view: new ol.View({
                    center: [-73.95, 40.75],
                    zoom: 12,
                    projection: 'EPSG:4326'
                })
            }),
            query = [];
    map.addLayer(new ol.layer.Tile({
        source: new ol.source.Tianditu({
            url: "http://t0.tianditu.com/vec_c/wmts",
            matrixSet: 'c',
            layer: 'vec',
            projection: "EPSG:4326"
        })
    }));
    ($('#query').val() || $('#query').attr('placeholder')).split(',').map(function (el) {
        return query.push(parseFloat(el));
    });
    var processingJobsService = new ol.supermap.ProcessingJobsService(processingJobsUrl),
            info = new ol.control.Control({element: document.getElementById('popup')});

    info.setMap(map);
    map.addControl(info);
    SuperMap.SecurityManager.registerToken('http://117.122.248.69:8090', token);

    $('#btn').on('click', function () {
        $('#btn').prop('disabled', true);
        $("#model").modal({show: true, backdrop: 'static', keyboard: false});
        if (map && layer) {
            map.removeLayer(layer);
        }
        var summaryMeshJobParameter = new SuperMap.SummaryMeshJobParameter({
            datasetName: $('#datasetName').val() || $('#datasetName').attr('placeholder'),
            resolution: $('#resolution').val() || $('#resolution').attr('placeholder'),
            meshType: $('#meshType option:selected').attr('value'),
            fields: $('#fields').val() || $('#fields').attr('placeholder'),
            query: query,
            statisticModes: $('#statisticModes').val() || $('#statisticModes').attr('placeholder'),
            type: $('#type option:selected').attr('value')
        });
        processingJobsService.addSummaryMeshJob(summaryMeshJobParameter, function (serviceResult) {
            if (serviceResult.error) {
                $('#btn').prop('disabled', false);
                $("#model").modal('hide');
                alert('创建失败!');
                return;
            }
            serviceResult.result.setting.serviceInfo.targetServiceInfos.map(function (info) {
                if (info.serviceType === 'RESTMAP') {
                    SuperMap.Request.get(info.serviceAddress + '/maps').then(function (response) {
                        return response.json();
                    }).then(function (result) {
                        var mapUrl = result[0].path;
                        new ol.supermap.MapService(mapUrl).getMapInfo(function (mapInfo) {
                            layer = new ol.layer.Tile({
                                source: new ol.source.ImageSuperMapRest(ol.source.ImageSuperMapRest.optionsFromMapJSON(mapUrl, mapInfo.result))
                            });
                            map.addLayer(layer);
                            $("#model").modal('hide');
                            $('#btn').prop('disabled', false);
                        });
                    });
                }
            });
        });
    });

</script>
</body>
</html>